<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/login_reg.css" rel="stylesheet" type="text/css">
		<link href="../css/mui.picker.min.css" rel="stylesheet" />
		<link href="../css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" href="../src/iconfont/iconfont.css">
		<style> 
			.logreg-input-frame input{
				display: block;
			    width: 85%;
			    margin-left: auto!important;
			    margin-right: auto!important;
			    height: 50px;
			    border-radius: 100px;
			    background-color: #ffffff;
			    border: none;
			    padding-left: 20px!important;
			    margin-bottom: 20px!important;
			    box-shadow: 0px 10px 10px 0px rgba(220, 220, 220, 0.5);
			    font-size: 13px;
			}
			#select {
				display: block;
			    width: 85%;
			    margin-left: auto!important;
			    margin-right: auto!important;
			    height: 50px;
			    border-radius: 100px;
			    background-color: #ffffff;
			    border: none;
			    margin-bottom: 0.25rem!important;
			    box-shadow: 0px 10px 10px 0px rgba(220, 220, 220, 0.5);
			    line-height: 50px;
			    color: #7b7b7b;
			    font-size: 13px;
			    padding-left:0 ;
			}
			.select-head .select-head-cont {
				float: left;
				font-size: 13px;
				padding-left: 20px!important;
			}
			
			.select-head .select-icon {
				float: right;
				padding-right:15px!important; 
				color: #7b7b7b;
			}
			
			.select-head .select-icon img {
				width: 0.25rem;
			}
			.option {
				color: #7B7B7B;
				background: #fff;
				display: none;
				position: relative;
				text-align:center;
				z-index: 9;
				font-size: 13px;
				border-radius: 15px;
				width: 100%;
				padding-left:0 ;
			}
			
			.option-item:hover {
				background: rgba(204, 106, 67, 0.3);
			}
			
			.option-item {
				line-height: 30px;
				border-bottom: solid 1px #f1f1f1;
				border-radius: 50px;
			}
			
			.option-item:last-child {
				border: none;
			}
			
			.mui-dtpicker-header {
				padding: 6px!important;
			}
			
			.mui-radio input[type='radio']:before,
			.mui-checkbox input[type='checkbox']:before {
				font-size: 20px!important;
			}
			
			.mui-radio input[type='radio'],
			.mui-checkbox input[type='checkbox'] {
				top: 1px;
				right: 10px;
			}
			#teacherabox{
				display: none;
			}
			.radiohttp{
				width: 50%;
				font-size: 14px;
				height: 40px;
				position: absolute;
				left:30px;
				line-height: 40px;
			}
			.checkbox{
			
				margin-top: 12px!important;
				position: absolute;  
			}
			.check{
				width: 15px!important;
				height: 15px!important;
				margin-left: 30px!important;
			}
			#http{
				color: red!important;
				text-decoration: underline!important;
			}
			.clear{
				clear: both;
				overflow: hidden;
				height: 0;
			}
			ul{
				list-style: none;
			}
			.agreebox{
				padding-left: 20px!important;
			}
			body{
				background:#EEF6FF!important;
				top: 10%!important;
				position: absolute!important;
				width: 100%;
			}
			.mui-poppicker-header{
				    padding: 6px!important;
				    font-size: 14px!important;
				    color: #888!important;
			}
		</style>
	</head>

	<body>
		<div id="reg">
			<div class="logreg">
				<div class="logreg-input-frame logreg-wrap">
					<input type="text" name="" id="mobileText" value="" placeholder="请输入您的手机号码" class="logreg-input" />
					<div class="logreg-input-code clearfix posir">
						<input type="text" name="" id="vcodeText" value="" maxlength="20" placeholder="填写验证码" class="logreg-input fl" onKeyUp="value=value.replace(/[^\w\.\/]/ig,'')" />
						<div class="line"></div>
						<input type="button" name="" id="vcodeBtn" value="获取验证码" class="logreg-input reg-button-code fr" />

					</div>
					<input type="password" name="" id="pwdText" value="" placeholder="输入密码" class="logreg-input" />
					<input type="password" name="" id="rpwdText" value="" placeholder="确认密码" class="logreg-input" />
					<input type="text" name="" value="" placeholder="请选择与宝宝的关系" class="logreg-input" id="showUserPicker" />
					
					<div class="jiazhang" style="position: relative;">
						<!--<input type="text" name="" id="childName" value="" placeholder="请输入宝宝姓名" class="logreg-input" />
						<input type="text" name="" id="stardate" value="" placeholder="请选择宝宝生日" class="logreg-input" />-->
						<input type="text" name="" id="classCode" value="" placeholder="请扫描宝宝二维码" class="logreg-input"/> <span class="iconfont icon-scan_light scan" style="position: absolute; bottom:14px; right: 45px;font-size: 20px;background:#fff;"></span>
					</div>
					<div class="login-a-frame clearfix"> 
	                    <a id="already" href="JavaScript:;" class="login-reg fl" style="color:#888888;">已有账号</a>
	                    <a id="fpwdBtn" href="JavaScript:;" class="login-password fr" style="color:#888888;">忘记密码</a>
                	</div>
                	<button type="button" name="loginBtn" id="regBtn" class="logreg-input buttom animated fadeInUp" />注册</button>
					
					
					<div class="radiohttp">
						<div class="checkbox">
							<input name="checkbox1" type="checkbox" checked class="check fl" id="check">
						</div>
						<div class="agreebox">已阅读并同意<span id="http">使用协议</span></div>
					</div>
				</div>

				<!-- <div class="logreg-line">Copyright © 2018 All Rights Reserved</div> -->
			</div>
		</div> 
		<script src="../js/mui.min.js"></script>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script src="../js/verification.js"></script>
		<script src="../js/app.js"></script>
		<script src="../js/mui.picker.js"></script>
		<script src="../js/mui.picker.min.js"></script>
		<script src="../js/mui.poppicker.js"></script>

		<script>
			(function($, doc) {
			var state = app.getState(); 
			memberToken = state.memberToken;
			$.init();
			$.ready(function() {
				/**
				 * 获取对象属性的值
				 * 主要用于过滤三级联动中，可能出现的最低级的数据不存在的情况，实际开发中需要注意这一点；
				 * @param {Object} obj 对象
				 * @param {String} param 属性名
				 */
				var _getParam = function(obj, param) {
					return obj[param] || '';
				};
				//普通示例
				var userPicker = new $.PopPicker();
				userPicker.setData(['爸爸', '妈妈', '爷爷', '奶奶', '姥姥', '姥爷']);
				var showUserPickerButton = doc.getElementById('showUserPicker');
				showUserPickerButton.addEventListener('tap', function(event) {
					userPicker.show(function(items) {
						var stringrelation = JSON.stringify(items[0]);
						var reg = new RegExp('"', "g");
						stringrelation = stringrelation.replace(reg, "");
						showUserPickerButton.value = stringrelation;
					});
				}, false);
		

			});
		})(mui, document);

			mui.init();
			mui.plusReady(function() {
				
				//设置只支持竖屏幕显示
				plus.screen.lockOrientation("portrait-primary");

				var mobileText = document.getElementById('mobileText');
				var vcodeText = document.getElementById('vcodeText');
				var pwdText = document.getElementById('pwdText');
				var rpwdText = document.getElementById('rpwdText');
				var vcodeBtn = document.getElementById('vcodeBtn');
				var regBtn = document.getElementById('regBtn');
				/*var childName = document.getElementById('childName');
				var birthday = document.getElementById('stardate');*/
				var classCode = document.getElementById('classCode');
				/*var teachera = document.getElementById('teachera');*/
				var http = document.getElementById('http');
				var check = document.getElementById('check');
				//发送验证码

				vcodeBtn.addEventListener('tap', function(event) {
					if(!verification.phone(mobileText.value, "mobileText")) return;

					settime()

					verification.code(mobileText.value, "vcodeBtn");
				});
				//使用协议
				http.addEventListener('tap', function(event) {
					mui.openWindow({
						url: 'agreement.html',
						id: 'agreement',
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView = { //详情页原生导航配置
								autoBackButton: true, //自动绘制返回箭头
								backgroundColor: '#fff', //导航栏背景色
								titleText: '童伴用户使用协议', //导航栏标题
								titleColor: '#000', //文字颜色
								//coverage:"120px",
								//type: 'transparent', //透明渐变样式
								splitLine: { //底部分割线
									color: '#dfdfdf'
								}
							}
						}
					});
				});
				
				//注册 
				var regBtnStatus = 0;
				var apptype = '';
				var showUserPickerButton = document.getElementById('showUserPicker');
				regBtn.addEventListener('tap', function(event) {
					if(regBtnStatus == 1) return;
					regBtnStatus == 1;

					if(!verification.phone(mobileText.value, "mobileText")) return;
					if(!verification.vcode(vcodeText.value, "vcodeText")) return;
					if(!verification.pwd(pwdText.value, "pwdText")) return;
					if(!verification.rpwd(pwdText.value, rpwdText.value, "rpwdText")) return;
					if(!verification.http(check)) return;
					if(ismobile() == 0) {
						apptype = 2
					} else {
						apptype = 1
					}
					if(!verification.classCode(classCode.value, "classCode")) return;
						var data = {
							tel: mobileText.value, //注册手机号
							mobilecode: vcodeText.value, //验证码
							pwd: pwdText.value,
							classcode: classCode.value,
							relationship:showUserPickerButton.value, 
							appType: apptype 
						};
						//alert(JSON.stringify(data))
				

					mui.post(Apiurl+'index/reg', data, function(result) {
						//alert(JSON.stringify(result))
						if(result.status == 200) {
							mui.openWindow({
								url: 'login.html',
								id: 'loginb',
								preload: true,
								show: {
									aniShow: 'pop-in'
								},

								waiting: {
									autoShow: false
								}
							});
							mui.toast("注册成功" + '恭喜您获得' + result.point + "积分");

						} else if(result.status == 202) {
							mui.toast(result.errmsg);
						} else if(result.status == 201) {
							mui.toast(result.errmsg);
						}
					}, 'json');

					
				});
			});

			var countdown = 60;

			function settime() {
				if(countdown == 0) {
					document.getElementById('vcodeBtn').removeAttribute("disabled");
					document.getElementById('vcodeBtn').value = "获取验证码";
					countdown = 60;
					return;
				} else {
					document.getElementById('vcodeBtn').setAttribute("disabled", true);
					document.getElementById('vcodeBtn').value = "重新发送(" + countdown + ")";
					countdown--;
				}
				setTimeout(function() {
					settime()
				}, 1000)
			}
			
			
			
			
			mui('#reg').on('tap', '.scan', function() {
					mui.openWindow({
						url: 'barcode_scan.html',
						id: 'scan',
						createNew:true, 
						styles: {
							"render": "always",
							"popGesture": "hide",
							"bounce": "vertical",
							"bounceBackground": "#efeff4",
							"titleNView": titleNView = { //详情页原生导航配置
								autoBackButton: true, //自动绘制返回箭头
								backgroundColor: '#25aae3', //导航栏背景色
								titleText: '扫描二维码', //导航栏标题
								titleColor: '#F7F7F7', //文字颜色
								//coverage:"120px",
								//type: 'transparent', //透明渐变样式
								splitLine: { //底部分割线
									color: '#cccccc'
								}
							}
						}
					});
			})
			function scaned(result){
				document.getElementById('classCode').value=result; 
				document.getElementById('teachera').value=result;
			}
   			document.getElementById('already').addEventListener('tap',function(){
   				mui.openWindow({
						url: 'login.html',
						id: 'login',
						createNew:true, 
					});
   			})
   			document.getElementById('fpwdBtn').addEventListener('tap',function(){
   				mui.openWindow({
						url: 'findpwd.html',
						id: 'login',
						createNew:true, 
					});
   			})
		</script>
	</body>

</html>